$fColor: cornflowerblue;

*,
*:before,
*:after {
    box-sizing: border-box;
    margin    : 0;
    padding   : 0;
}

h1.lg {
    font-size    : 1em;
    padding      : 0.5em;
    border-bottom: 1px dashed $fColor;
    color        : $fColor;
    cursor: pointer;
}

h1.lg {
		padding: 10px 0;
		margin: 0 20px;
		color: #797878;
		text-shadow: none;
		position: relative;
		&::before {
			position: absolute;
			top: 0;
			left: 0;
			overflow: hidden;
			padding: 10px 0;
			max-width: 0;
			border-bottom: 2px solid #fff;
			color: #fff;
			content: attr(data-hover);
			-webkit-transition: max-width 0.5s;
			-moz-transition: max-width 0.5s;
			transition: max-width 0.5s;
		}
		&:hover{
			&::before{
				max-width: 100%;
			}
		}
	}

.container {
    display    : flex;
    flex-flow  : row nowrap;
    height     : 100vh;
    align-items: stretch;

    .ctrl {
        border-right: 1px dashed $fColor;
        flex        : 400px 0 1;
    }

    .prev {
        flex: 600px 3 1;
    }
}